<template>
  
  <view class="page-container">
    <!-- 内容区域 -->
    <view class="content">
      <!-- 上融生活专属客服 -->
      <view class="customer-service">
        <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
        <text class="service-text">米多鱼s<br>您的专属客服</text>
      </view>

      <!-- 描述文本 -->
      <view class="description">
        <text>尊敬的平台推广人! 专属客服是面向用户的第一责任人，在享有平台相关权益的同时，也肩负对用户进行指导、培训和排忧解惑的责任和义务。</text>
      </view>

      <!-- 按钮区域 -->
      <view class="button-group">
        <button class="contact-button" @click="contactReferrer">联系推荐人电话</button>
        <button class="qq-button" @click="addQQ">添加官方QQ客服</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { getContacts } from "@/api/member.js"
const contactsData = ref({});
// 页面逻辑可以在这里编写
const goBack = () => {
  uni.navigateBack();
};

const contacts = async()=>{
	let res = await getContacts().then(result=>{
		contactsData.value=result;
	})
}
contacts();

const contactReferrer = () => {

	if(!contactsData.value.phone){
		uni.showToast({
		  title: '您的上级很懒什么都没留下！', // 提示内容
		  icon: 'none',    // 图标（success/loading/none）
		  duration: 2000      // 显示时长（毫秒）
		});
	}else{
		// 弹出拨打电话的确认对话框
		uni.showModal({
		  title: '拨打电话',
		  content: '您的上级手机号为: '+contactsData.value.phone,
		  confirmText: '拨打',
		  cancelText: '取消',
		  success: (res) => {
		    if (res.confirm) {
		      // 用户点击“拨打”按钮，执行拨打电话操作
		      uni.makePhoneCall({
		        phoneNumber: contactsData.value.phone // 这里替换为实际的电话号码
		      });
		    }
		  }
		});
	}

};

const addQQ = () => {
  // 弹出复制QQ号的确认对话框
  uni.showModal({
    title: '官方QQ客服',
    content: '米多鱼官方QQ客服号为: '+contactsData.value.qq,
    confirmText: '复制QQ号',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        // 用户点击“复制QQ号”按钮，执行复制操作
        uni.setClipboardData({
          data: contactsData.value.qq, // 这里替换为实际的QQ号
          success: function () {
            uni.showToast({
              title: 'QQ号已复制',
              icon: 'success'
            });
          }
        });
      }
    }
  });
};
</script>

<style scoped>
.page-container {
  background-color: #f5f5f5;
}
.top-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  color: #fff;
  font-weight: bold;
}

.content {
  margin: 10rpx 10rpx 10px 10rpx;
  border: 1rpx solid #fff;
  font-size: 14px;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background-color: white;
  background-clip: padding-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  top: 0;
}

.customer-service {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.logo {
  width: 60rpx;
  height: 60rpx;
  margin-right: 10rpx;
}

.service-text {
  font-size: 28rpx;
  color: #333;
}

.description {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.button-group {
  display: flex;
  justify-content: space-around;
}

.contact-button, .qq-button {
  width: 300rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #fff;
}

.contact-button {
  background-color: #e74c3c;
}

.qq-button {
  background-color: #2ecc71;
}

.customer-service,.description{
	padding: 20rpx;
}
.description{
	padding: 25rpx 20rpx;
	border-bottom: 1rpx solid #fff;
	box-shadow: 1px 0px 2px rgba(0, 0, 0, .3);
	text-indent: 2em;
	font-size: 26rpx;
	font-weight: 300;
}
.button-group{
	padding: 25rpx 20rpx;
}
</style>
